<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>house.html</title>

    <!--引入Vue组件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!--引入Axios组件，用来发送异步http请求的-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">
    <el-button type="primary" icon="el-icon-edit" @click="dialogAddFormVisible=true">添加</el-button>

    <el-form :inline="true" :model="houseQueryDto" class="demo-form-inline">
        <el-form-item label="楼层">
            <el-input v-model="houseQueryDto.floor" placeholder="输入楼层" clearable></el-input>
        </el-form-item>
        <el-form-item label="房屋状态">
            <el-select v-model="houseQueryDto.status" placeholder="选择状态" clearable>
                <el-option label="已入住" value="1"></el-option>
                <el-option label="空闲" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="房屋状态">
            <el-date-picker
                    v-model="intoDates"
                    type="daterange"
                    clearable
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd">
            </el-date-picker>
        </el-form-item>

        <el-form-item label="房屋编号">
            <el-input v-model="houseQueryDto.houseNo" placeholder="房屋编号" clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"  icon="el-icon-search" @click="queryPage">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table
            :data="houses"
            border
            style="width: 100%">
        <el-table-column
                label="编号"
                prop="id"
                width="180">
        </el-table-column>

        <el-table-column
                label="楼层"
                prop="floor"
                width="180">
        </el-table-column>

        <el-table-column
                label="大小"
                prop="area"
                width="180">
        </el-table-column>

        <el-table-column
                label="是否入住"
                prop="status"
                width="180">
            <template slot-scope="scope">
                <el-tag
                        :type="scope.row.status===1 ? 'primary' : 'success'">
                    {{scope.row.status===1 ?"入住":"空闲"}}
                </el-tag>
            </template>

        </el-table-column>

        <el-table-column
                label="入住时间"
                prop="intoDate"
                width="180">
        </el-table-column>
        <el-table-column
                label="创建时间"
                prop="createTime"
                width="180">
        </el-table-column>

        <!--  build  -->
        <el-table-column
                label="楼栋"
                prop="building.numbers"
                width="180">
        </el-table-column>
        <el-table-column
                label="单元"
                prop="building.units"
                width="180">
        </el-table-column>

        <!--  owner  -->
        <el-table-column
                label="业主姓名"
                prop="owner.username"
                width="180">
        </el-table-column>
        <el-table-column
                label="业主电话"
                prop="owner.tel"
                width="180">
        </el-table-column>

        <el-table-column
                align="center"
                label="备注"
                prop="remarks"
                width="180">
        </el-table-column>
        <el-table-column label="操作">
            <!-- 自定义的区域 插槽-->
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="">
                    编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <el-dialog title="添加房子信息" :visible.sync="dialogAddFormVisible">
        <el-form :model="house">
            <el-form-item label="楼层" label-width="80px">
                <el-input v-model="house.floor"></el-input>
            </el-form-item>
            <el-form-item label="房屋编号" label-width="80px">
                <el-input v-model="house.houseNo"></el-input>
            </el-form-item>

            <el-form-item label="大小" label-width="80px">
                <el-input v-model="house.area"></el-input>
            </el-form-item>

            <el-form-item label="状态" label-width="80px">
                <el-radio v-model="house.status" label="1">入住</el-radio>
                <el-radio v-model="house.status" label="0">空闲</el-radio>
            </el-form-item>

            <el-form-item label="楼栋" label-width="80px">

                <el-select v-model="house.buildingId" placeholder="请选择楼栋">
                    <el-option
                            v-for="item in builds"
                            :label="item.numbers"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="业主" label-width="80px">
                <el-select v-model="house.ownerId" placeholder="请选择业主">
                    <el-option
                            v-for="item in owners"
                            :label="item.username"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="入住时间" label-width="80px">
                <el-date-picker
                        v-model="house.intoDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择入住日期">
                </el-date-picker>
            </el-form-item>


            <el-form-item label="备注" label-width="80px">
                <el-input v-model="house.remarks"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="">取 消</el-button>
            <el-button type="primary" @click="addHouse">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    new Vue({                    // 创建一个Vue对象
        el:"#app",               // 选择器 Vue 作用的区域
        data:{                   // Vue 的数据 模型
            houses:[],
            dialogAddFormVisible:false,
            house:{},
            builds:[],  //楼栋的数据
            owners:[],  //查询所有的业务
            currentPage:1,
            pageSize:2,
            pageSizes:[2,4],
            total:0,
            houseQueryDto:{

            },
            intoDates:[]
        },
        methods:{              //方法

            queryHouse(){
            },

            handleCurrentChange(val){
                this.currentPage = val;
                this.queryPage();
            },

            handleSizeChange(val){
                this.pageSize = val;
                this.queryPage();
            },

            //添加 房屋
            addHouse(){
                axios({
                    url:"/house",
                    method:"post",
                    data:this.house
                }).then(resp=>{
                    if( resp.data.code == 200){
                        //关闭  dialog
                        this.dialogAddFormVisible = false
                        //清空
                        this.house={}
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                        this.queryPage();
                    }
                })
            },
            getData(){
                axios({
                    url:"/house",
                    method:"get"
                }).then(resp=>{
                    console.log(resp)
                    this.houses = resp.data.obj
                })
            },
            //查询楼栋的所有的数据
            getBuilds(){
                axios({
                    url:"/building/list",
                    method:"get"
                }).then(resp=>{
                    this.builds = resp.data.obj
                })
            },
            //查询owner的所有的数据
            getOwners(){
                axios({
                    url:"/owner/list",
                    method:"get"
                }).then(resp=>{
                    this.owners = resp.data.obj
                })
            },
            queryPage(){
                //时间的处理
                if (this.intoDates){
                    this.houseQueryDto.startIntoDate = this.intoDates[0]
                    this.houseQueryDto.endIntoDate = this.intoDates[1]
                }
                axios({
                    url:`/house/${this.currentPage}/${this.pageSize}`,
                    method:"get",
                    params:this.houseQueryDto
                }).then(resp=>{
                    console.log(resp)
                    this.houses = resp.data.obj.data
                    this.total = resp.data.obj.total
                    //清空 条件
                    this.houseQueryDto = {}
                    this.intoDates = null
                })
            }
        },
        created(){
            this.queryPage()
            this.getBuilds() //加载楼栋的数据
            this.getOwners() //加载owner的数据
        }
    })
</script>

</body>
</html>